<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>从一个API获取博文列表</title>
</head>
<body>
  <div id="app1">
    <div :style='{fontSize: postFontSize +"rem"}'>
      <blog-post
      v-for='post in posts'
      v-bind:key='post.id'
      v-bind:post='post'
      v-on:enlarge-text01='postFontSize += $event'
      v-on:enlarge-text02='postFontSize -= $event'
      ></blog-post>
      
    </div>
      
  </div>
  
</body>
<script src="./vue1111.js"></script>
<script>
  Vue.component('blog-post',{
    props: ['post'],
    template:`
    <div>
      <div> {{post.id}}</div>
      <h3>{{post.title}}</h3>
      <div> {{post.body}}</div>
      <button v-on:click='$emit("enlarge-text01",0.1)'>点击变大</button>
      <button v-on:click='$emit("enlarge-text02",0.5)'>点击变小</button>
    </div>
    `
  });
  new Vue({
    el:'#app1',
    data:{
      posts:[],
      postFontSize:1
    },
    created(){
       var vm = this;
       fetch('https://jsonplaceholder.typicode.com/posts',{method:'get'}).then((response) => {
           return response.json()
       }).then((data) => {
           vm.posts = data;
           console.log(data)
       })
    }
  })
</script>
</html>